<h6 class="card-header">
    <span ng-bind="$ctrl.header"></span>
</h6>
<table class="table table-sm">
    <thead class="thead-light">
        <tr>
            <th scope="col" width="5%">
                <span class="oi oi-move"></span>
            </th>
            <th scope="col" ng-repeat="col in $ctrl.columns | orderBy:'priority' track by $index" ng-bind="col.title"
                ng-if="$index < 3"></th>
                <th></th>
            
        </tr>
    </thead>
    <tbody class="sortable">
        <tr class="sortable-item module-column" 
            ng-repeat="item in $ctrl.data track by $index" 
            ng-class="{'selected': $ctrl.selectedProp === item}">            
            <td style="cursor:grab;">
                <span class="oi oi-move"></span>
            </td>
            <td ng-repeat="col in $ctrl.columns | orderBy:'priority' track by $index">
                <attribute-value-preview ng-if="$index < 3" data="$ctrl.filterData(item, col.name)"></attribute-value-preview>
            </td>
            <td>
                <a ng-click="$ctrl.update(item)" class="btn btn-link">
                    <span class="fas fa-pen text-warning"></span>
                </a>
                <a ng-click="$ctrl.delete(item)" class="btn btn-link">
                    <span class="fas fa-trash-alt text-danger"></span>
                </a>
            </td>
        </tr>
    </tbody>
</table>